iT邦幫忙

0

【Flutter】筆記4-Body{Center、Column、Row、Container、SizedBox&Padding}

  • 分享至 

  • xImage
  •  

在body下有這堆東西可以選擇

Center:(置中)
Center Widget可以將其子Widget居中對齊。
當子Widget的寬高不指定或不足父Widget的大小時,Center可以將其置中對齊。
-------------------------------------------------------------------------------

Column:(行)
Column Widget是一個垂直排列的Widget容器,可以將其子Widget按照垂直方向依次排列。
子Widget可以設置靜態高度,也可以自適應父容器的高度。

Row:(列)
Row Widget是一個水平排列的Widget容器,可以將其子Widget按照水平方向依次排列。
子Widget可以設置靜態寬度,也可以自適應父容器的寬度。

--------------------------------------------------------------------------------
Container:(容器)
Container Widget是一個矩形容器,可以包含其他Widget。
它可以設置大小、背景色、邊框、填充、外邊距等屬性,用於構建各種UI元素。

SizedBox:(主要用於調整距離的空格填充物)(垂直向)
SizedBox Widget可以指定一個具體的寬高大小,用於佈局時調整間距或者固定子Widget的大小。

Padding:(主要用於調整距離的空格填充物)(水平向)
Padding Widget可以在其子Widget周圍添加指定量的填充。填充可以是固定大小或按比例指定。

StreamBuilder:(不是太懂@@@@@@@@@)
StreamBuilder Widget可以根據異步事件來構建UI。它可以侦听一个Stream流,并在收到新数据时自动重新構建UI,以反映数据的變化。

Row:(列)細項:

  const Row({
    super.key,
    super.mainAxisAlignment,
    super.mainAxisSize,
    super.crossAxisAlignment,
    super.textDirection,
    super.verticalDirection,
    super.textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
    super.children,
  }) : super(
    direction: Axis.horizontal,
  );

Column:(行)細項:

  const Column({
   key,【Widget的唯一標識符。】
   mainAxisAlignment,【子Widget在主軸上的對齊方式,
    可以設置為start、end、center、spaceBetween、spaceAround和spaceEvenly。】
    
   mainAxisSize,【軸方向上的大小,可以設置為min和max。】
    
   crossAxisAlignment,【子Widget在交叉軸上的對齊方式,
    可以設置為start、end、center、stretch和baseline。】
    
   textDirection,【文字方向,可以設置為ltr或rtl。】
   verticalDirection,【子Widget的垂直方向排列方式,可以設置為down或up。】
   textBaseline,【用於基準線對齊的值,可以設置為alphabetic或ideographic。】
   children,【子Widget列表,這些子Widget將垂直排列在一起。】
  }) 

Container細項:

  Container({
    key【Widget的唯一標識符。】
    alignment【子Widget在容器中的對齊方式,可以設置為Alignment對象或FractionalOffset對象。】
    padding【容器內邊距,可以設置為EdgeInsets對象。】
    color【容器的背景色,可以設置為Color對象。】
    decoration【容器的背景裝飾,可以設置為BoxDecoration對象。】
    foregroundDecoration【容器的前景裝飾,可以設置為BoxDecoration對象。】
    width【容器的寬度,可以設置為double值。】
    height【容器的高度,可以設置為double值。】
    constraints【容器的約束條件,可以設置為BoxConstraints對象。】
    margin【容器的外邊距,可以設置為EdgeInsets對象。】
    transform【容器的變換矩陣,可以設置為Matrix4對象。】
    transformAlignment【容器的變換對齊方式,可以設置為Alignment對象或FractionalOffset對象。】
    child【容器內的子Widget。】
    clipBehavior = Clip.none【容器對子Widget的裁剪方式,可以設置為Clip.none、Clip.hardEdge或Clip.antiAlias。】
})

Padding細項:

const Padding({
   super.key,
   required this.padding,
   super.child,
 });

SizedBox細項:

const SizedBox({ 
    super.key, 
    this.width, 
    this.height, 
    super.child 
});

StreamBuilder細項:

const StreamBuilder({
   super.key,
   this.initialData,
   super.stream,
   required this.builder,
 });

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言